import { CoursewaresListView } from '@/components/CoursewaresList';
import Source from '@/components/SourceSelect/Entity/Source';
import { Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';

export interface CourseDetailProps {
  guid?: string;
  name?: string;
  createTime?: string;
  coursewareList?: Source[];
  /**
   * @desc 上架信息
   */
  shelfInfo?: {
    isChargeText?: string;
    learnObjText?: string;
  };
}

export function CourseDetail({ coursewareList, name, createTime, shelfInfo, guid }: CourseDetailProps) {
  const [list, setList] = useState(coursewareList ?? []);
  useEffect(() => {
    if (!coursewareList?.length && guid) {
      Source.listWithRelationType('course', guid).then((data) => {
        setList(data);
      });
    }
  }, [coursewareList, guid]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card title="课件包基本信息">
        <Descriptions>
          <Descriptions.Item label="课件包名称">{name}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
        </Descriptions>
      </Card>
      {shelfInfo ? (
        <Card title="上架信息">
          <Descriptions column={2}>
            <Descriptions.Item label="是否收费">{shelfInfo.isChargeText}</Descriptions.Item>
            <Descriptions.Item label="学习对象">{shelfInfo.learnObjText}</Descriptions.Item>
          </Descriptions>
        </Card>
      ) : null}
      <Card title="课程内容">
        <CoursewaresListView value={list}></CoursewaresListView>
      </Card>
    </div>
  );
}
